<template>
    <div class="poor-top">
        <div class="notice">
            <i class="el-icon-bell"></i>
            <span>公告： {{ notice }}</span>
        </div>
        <div class="top">
            <div class="left" @click="goHome">
                <img src="../../assets/logo.0a3252a6.png" alt="">
                <p>助农扶贫网</p>
            </div>
            <div class="right">
                <img :src="userInfo.avatarUrl" alt="" v-show="userInfo.avatarUrl">
                <img src="../../assets/logo.0a3252a6.png" alt="" v-show="!userInfo.avatarUrl">

                <div class="login" v-if="token">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ userInfo.username }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="cart">购物车</el-dropdown-item>
                            <el-dropdown-item command="address">我的地址</el-dropdown-item>
                            <el-dropdown-item command="order">我的订单</el-dropdown-item>
                            <el-dropdown-item command="apply">我的申请</el-dropdown-item>
                            <!-- <el-dropdown-item command="good">历史点赞</el-dropdown-item> -->
                            <el-dropdown-item command="center">个人中心</el-dropdown-item>
                            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>

                <div class="login" @click="login" v-else>
                    登录 / 注册
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'poorTop',
    components: {

    },
    mixins: [],
    props: ['noticeArr'],
    data() {
        return {
            notice: '',
            timerId: null,
            index: -1,
        }
    },
    created() {
    },
    computed: {
        ...mapState('userStore', ['userInfo', 'token'])
    },
    watch: {

    },
    mounted() {
        this.timerId = setInterval(() => {
            this.interval()
        }, 2000);
    },
    methods: {
        ...mapMutations('userStore', ['loginout']),
        goHome() {
            // 检查当前路径是否已经是/home
            if (this.$route.path !== '/home') {
                // 如果不是，则导航到/home
                this.$router.push('/home');
            }
        },
        // 定时器
        interval() {
            let arr = this.noticeArr.map(item => item.title)
            if (this.index < arr.length - 1) {
                this.index++
            } else {
                this.index = -1
                this.index++
            }
            this.notice = arr[this.index]
        },
        login() {
            this.$bus.$emit('show', true)
        },
        handleCommand(command) {
            if (command == 'cart') {
                if (this.$route.fullPath !== '/cart') {
                    this.$router.push('/cart')
                }
            } else if (command == 'address') {
                if (this.$route.fullPath !== '/address') {
                    this.$router.push('/address')
                }
            } else if (command == 'order') {
                if (this.$route.fullPath !== '/orders') {
                    this.$router.push('/orders')
                }
            } else if (command == 'apply') {
                if (this.$route.fullPath !== '/applies') {
                    this.$router.push('/applies')
                }
            } else if (command == 'good') {
                if (this.$route.fullPath !== '/good') {
                    this.$router.push('/good')
                }
            } else if (command == 'center') {
                if (this.$route.fullPath !== '/center') {
                    this.$router.push('/center')
                }
            } else if (command == 'loginout') {
                // console.log(11111);
                this.loginout()

            }
        }

    },
    beforeDestroy() {
        // 清除定时器
        if (this.timerId) {
            clearInterval(this.timerId);
        }
    }
};
</script>
<style lang='less' scoped>
.poor-top {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .notice {
        font-size: 12px;
        color: #7f7f7f;
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding: 0 20px;
        background-color: white;

        span {
            margin-left: 3px;
        }
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 70px;
        background-color: white;
        border-bottom: 1px solid #d8d7d7;
        padding: 0 20px;

        .left {
            display: flex;
            align-items: center;
            cursor: pointer;


            p {
                font-size: 24px;
                color: #11a983;
                font-weight: 800;
            }

            img {
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .login {
                color: #7f7f7f;
                margin-left: -10px;
                cursor: pointer;

            }

            img {
                width: 45px;
                height: 45px;
                border: 1px dashed #d6d4d4;
                margin-right: 20px;
                border-radius: 50%;
            }
        }




    }
}
</style>